<!--学员条形码打印-->
<template>
  <div class="wrapper-container">
    <div class="search-container" style="margin-top: 0;">
      <div class="search-container-item">
        <span class="fontColor">补考学期：</span>
        <el-select v-model="bxxueqi" size="mini" clearable placeholder="请选择补考学期" style="width: 120px">
          <el-option v-for="(item, index) in bxxueqiList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </div>
      <div class="search-container-item">
        <span class="fontColor marginLeft">培养层次：</span>
        <el-select v-model="pylevel" size="mini" clearable placeholder="请选择培养层次" style="width: 120px">
          <el-option v-for="item in pylevelList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </div>
      <div class="search-container-item">
        <span class="fontColor marginLeft">学号：</span>
        <el-input v-model="studentno" size="mini" clearable placeholder="请输入学号" style="width: 120px" />
      </div>
      <div class="search-button" style="margin:2px 0 0 15px;color: #51aef6;" @click="handleSearch">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button" style="margin:2px 0 0 15px;color: #51aef6;" @click="handleReport">
        <span>给予报名</span>
      </div>
      <div class="search-button" style="margin:2px 0 0 15px;background: #ffefef;border: 1px solid #fa5339;color: #ff3819;" @click="handleCancel">
        <span>取消报名</span>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="teststatus" label="状态" width="125" align="center" />
        <el-table-column prop="studentno" label="学号" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="courseno" label="课程编号" align="center" />
        <el-table-column prop="coursename" label="课程名称" align="center" />
        <el-table-column prop="proclassname" label="专业班次名称" align="center" />
        <el-table-column prop="zpscore" label="总评成绩" align="center" />
        <el-table-column prop="kstype" label="考试性质" align="center" />
        <el-table-column prop="onemorescore" label="第二次补考成绩" align="center" />
        <el-table-column prop="onemorexueqi" label="第二次补考学期" align="center" />
        <el-table-column prop="bkscore" label="补考成绩" align="center" />
        <el-table-column prop="bktype" label="补考性质" align="center" />
        <el-table-column prop="yxueqi" label="原考试学期" align="center" />
        <el-table-column prop="bxxueqi" label="补考学期" align="center" />
      </el-table>
    </div>
    <div class="export-button" style="width: 130px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      height: 28px;
      line-height: 28px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      box-sizing: border-box">
      <img src="../../../assets/assessment/icon-export.png" style="width: 16px; height: 16px; margin-right: 5px;" alt=""/>
      <download-excel
        class="export-btn"
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="补缓考报名.xls"
        style="color: #f3b815;cursor: pointer"
      >
        &ensp;导出Excel
      </download-excel>
    </div>
    <div class="block">
      <el-pagination
        style="width:auto;float:right;margin-top:-30px;padding:0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqGetXqList } from '@/api/course/courses'
import { reqCheckLevelList } from '@/api/admin1/check'
import { gettwoPassCondition, regisPass, outPass } from '@/api/examination/printBarCode'
export default {
  data() {
    return {
      current:1,
      size:10,
      total:'',
      bxxueqi: '',
      bxxueqiList: [],
      pylevel: '',
      pylevelList: [],
      studentno: '',
      tableData: [],
      selectedRows: [],
      selectedIds: '',
      selectedData:[],
      selidentityid: '',
      stateList: [
        {
          value: "2",
          label: "报名第二次补考",
        },
        {
          value: "1",
          label: "报名第一次补考",
        },
        {
          value: "0",
          label: "未报名",
        }
      ],
      jsonFields: {
        状态: 'teststatus',
        学号: 'studentno',
        姓名: 'name',
        课程编号: 'courseno',
        课程名称: 'coursename',
        专业班次名称: 'proclassname',
        总评成绩: 'zpscore',
        考试性质: 'kstype',
        第二次补考成绩: 'onemorescore',
        第二次补考性质: 'onemorexueqi',
        补考成绩: 'bkscore',
        补考性质: 'bktype',
        原考试学期: 'yxueqi',
        补考学期: 'bxxueqi'
      }
    }
  },
  mounted() {
    // 学期
    this.handleInitXq()
    // 培养层次
    this.handleInitPycc()
    // 初始查询
    this.handleSearch()
  },
  methods: {
    handleCurrentChange(val) {
      this.current = val;
      this.queryList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.queryList();
    },
    handleInitXq: function () {
      reqGetXqList().then((res) => {
        if (res.data.code === 200) {
          this.bxxueqiList = res.data.data
        }
      })
    },
    handleInitPycc: function () {
      reqCheckLevelList().then((res) => {
        if (res.data.code === 200) {
          this.pylevelList = res.data.data[0].children
        }
      })
    },
    clickSearch(){
      this.current = 1;
      this.handleSearch()
    },
    handleSearch: function () {
      const params = {
        bxxueqi: this.bxxueqi,
        pylevel: this.pylevel,
        studentno: this.studentno
      }
      gettwoPassCondition(this.current,this.size,params).then((res) => {
        if (res.data.code === 200) {
          let target
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.tableData.forEach(item => {
            target = this.stateList.find((ele) => {
              return ele.value === item.teststatus
            })
            item.teststatus = target !== undefined ? target.label : ''
          })
        }
      })
    },
    handleReport: function () {
      if (this.selectedIds === '') {
        this.$message({
          message: '请选择第二次补考报名记录！',
          type: 'warning'
        })
      } else {
        const target = this.selectedRows.find((ele) => {
          return ele.teststatus === '已报名'
        })
        if (target !== undefined) {
          this.$message({
            message: '不能选择已报名记录，请再次确认！',
            type: 'warning'
          })
        } else {
          regisPass(this.selectedData).then((res) => {
            if (res.data.code === 200) {
              this.handleSearch()
              this.$message({
                message: '给予报名成功！',
                type: 'success'
              })
            }
          })
        }
      }
    },
    handleCancel: function () {
      if (this.selectedIds === '') {
        this.$message({
          message: '请选择第二次补考报名记录！',
          type: 'warning'
        })
      } else {
        const target = this.selectedRows.find((ele) => {
          return ele.teststatus === '未报名'
        })
        if (target !== undefined) {
          this.$message({
            message: '不能选择未报名记录，请再次确认！',
            type: 'warning'
          })
        } else {
          outPass(this.selectedData).then((res) => {
            if (res.data.code === 200) {
              this.handleSearch()
              this.$message({
                message: '取消报名成功！',
                type: 'success'
              })
            }
          })
        }
      }
    },
    handleSelectionChange: function (section) {
      this.selectedData = section
      const array = [];
      const ids = []
      section.forEach(item => {
        array.push(item.id)
        ids.push(item.id)
      })
      this.selectedRows = section
      this.selectedIds = array.join(",")
      this.selidentityid = ids.join(",")
    }
  },
};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.wrapper-container {
  width: 100%;
  margin: 0 auto;
}
.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
  .fontColor {
    color: #004ca7;
  }
  .marginLeft {
    margin-left: 20px;
  }
</style>
